<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QQ音乐首页</title>
<link rel="stylesheet" href="index.css" type="text/css"  />
<script src="jquery-3.3.1.min.js"></script>
<script src="jquery-animate-css-rotate-scale-master/jquery-animate-css-rotate-scale.js"></script>
<script src="index.js"></script>

</head>

<body>
  <!--顶部导航区-->
<div class="top">
  
      <img src="source/logo.png"/>
      <ul class="top-loge">
          
          <li><a href="#">音乐馆</a></li>
          <li><a href="#">我的音乐</a></li>
          <li><a href="#">客服端</a></li>
          <li><a href="#">音乐号</a></li>
          <li><a href="#">VIP</a></li>
      </ul>
      <form action="">
          <input type="content" name="content"/>
          <i class"search">搜索</i>
      </form>
          
      <span class="logein"><a href="#">登录</a></span>
      <span class="open1"><a href="#">开通绿砖豪华</a></span>
      <span class="open2"><a href="#">开通付费包</a></span>
</div >

<!--/*次级导航区*/-->
<div class="nav">
 <div class="navInfo">
        <ul class="navInfo-loge">   
              <li><a href="#">首页</a></li>
              <li><a href="#">歌手</a></li>
              <li><a href="#">专辑</a></li>
              <li><a href="#">排行榜</a></li>
              <li><a href="#">分类歌曲</a></li>
              <li><a href="#">电台</a></li>
              <li><a href="#">MV</a></li>
              <li><a href="#">数字专辑</a></li>
      </ul>
 </div>
</div>
<!--歌单推荐区-->
<div class="reconmened">
 <div class="reconmenedInfo">
   <h1>歌曲推荐</h1>
   <ul>
              <li class="loveSong0"><a href="#"  class="cur">为你推荐</a></li>
              <li class="loveSong1"> <a href="#" >情歌</a></li>
              <li class="loveSong2"> <a href="#" >网络推荐</a></li>
              <li class="loveSong3"><a href="#" >经典</a></li>
              <li class="loveSong4"><a href="#" >官方歌单</a></li>
              <li class="loveSong5"><a href="#"  >KTV热歌</a></li>
   </ul>
<!--   noshow为消失点-->
   <div class="show chose" id="c0">
     <ul>
           <li>
               <div class="show-box">
                 <div class="box"><img src="source/2.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>每日新歌：仙女组局GrilCruch王炸</span>
                 <span>播放量：11万</span>
               </div>
           </li>
           <li>
               <div class="show-box" >
                 <div class="box"><img src="source/3.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>出逃计划：身体和灵魂总要有一个在路上</span>
                 <span>播放量：31万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/4.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>和女友来首俏皮舞曲</span>
                 <span>播放量：3.1万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/5.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>发现自己的美，做一个安静的小仙女</span>
                 <span>播放量：71万</span>
               </div>
           
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/1.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>感受中国风，中国新力量</span>
                 <span>播放量：1.1万</span>
               </div>
           </li>
     
     </ul>
   
   </div>
   <div class="show " id="c1">
     <ul>
           <li>
               <div class="show-box">
                 <div class="box"><img src="source/7.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>每日新歌：仙女组局GrilCruch王炸</span>
                 <span>播放量：11万</span>
               </div>
           </li>
           <li>
               <div class="show-box" >
                 <div class="box"><img src="source/1.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>出逃计划：身体和灵魂总要有一个在路上</span>
                 <span>播放量：31万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/9.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>和女友来首俏皮舞曲</span>
                 <span>播放量：3.1万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/3.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>发现自己的美，做一个安静的小仙女</span>
                 <span>播放量：71万</span>
               </div>
           
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/2.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>感受中国风，中国新力量</span>
                 <span>播放量：1.1万</span>
               </div>
           </li>
     
     </ul>
   </div>
   <div class="show " id="c2">
     <ul>
           <li>
               <div class="show-box">
                 <div class="box"><img src="source/6.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>每日新歌：仙女组局GrilCruch王炸</span>
                 <span>播放量：11万</span>
               </div>
           </li>
           <li>
               <div class="show-box" >
                 <div class="box"><img src="source/8.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>出逃计划：身体和灵魂总要有一个在路上</span>
                 <span>播放量：31万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/7.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>和女友来首俏皮舞曲</span>
                 <span>播放量：3.1万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/2.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>发现自己的美，做一个安静的小仙女</span>
                 <span>播放量：71万</span>
               </div>
           
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/5.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>感受中国风，中国新力量</span>
                 <span>播放量：1.1万</span>
               </div>
           </li>
     
     </ul>
   
   </div>
 <div class="show chose" id="c3">
     <ul>
           <li>
               <div class="show-box">
                 <div class="box"><img src="source/2.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>每日新歌：仙女组局GrilCruch王炸</span>
                 <span>播放量：11万</span>
               </div>
           </li>
           <li>
               <div class="show-box" >
                 <div class="box"><img src="source/1.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>出逃计划：身体和灵魂总要有一个在路上</span>
                 <span>播放量：31万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/4.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>和女友来首俏皮舞曲</span>
                 <span>播放量：3.1万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/9.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>发现自己的美，做一个安静的小仙女</span>
                 <span>播放量：71万</span>
               </div>
           
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/8.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>感受中国风，中国新力量</span>
                 <span>播放量：1.1万</span>
               </div>
           </li>
     
     </ul>
   
   </div><div class="show chose" id="c4">
     <ul>
           <li>
               <div class="show-box">
                 <div class="box"><img src="source/2.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>每日新歌：仙女组局GrilCruch王炸</span>
                 <span>播放量：11万</span>
               </div>
           </li>
           <li>
               <div class="show-box" >
                 <div class="box"><img src="source/3.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>出逃计划：身体和灵魂总要有一个在路上</span>
                 <span>播放量：31万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/1.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>和女友来ad俏皮舞曲</span>
                 <span>播放量：3.1万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/6.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>发现自己的美，做一个安静的小仙女</span>
                 <span>播放量：71万</span>
               </div>
           
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/7.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>感受中国风，中国新力量</span>
                 <span>播放量：1.1万</span>
               </div>
           </li>
     
     </ul>
   
   </div>  
   
 <div class="show chose" id="c5">
     <ul>
           <li>
               <div class="show-box">
                 <div class="box"><img src="source/5.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>每日新歌：仙女组局GrilCruch王炸</span>
                 <span>播放量：11万</span>
               </div>
           </li>
           <li>
               <div class="show-box" >
                 <div class="box"><img src="source/2.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>出逃计划：身体和灵魂总要有一个在路上</span>
                 <span>播放量：31万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/7.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>和女友来首俏皮舞曲</span>
                 <span>播放量：3.1万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/3.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>发现自己的美，做一个安静的小仙女</span>
                 <span>播放量：71万</span>
               </div>
           
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/6.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>感受中国风，中国新力量</span>
                 <span>播放量：1.1万</span>
               </div>
           </li>
     
     </ul>
   
   </div>
 </div>
</div>
<!--新歌首发-->
<div class="newSong">
    <div class="newSongInfo">
   <h1>新歌首发</h1>
       <div class="songBox">
           <i></i>
           <span>播放全部</span>
       </div>
           <ul class="newBox">
                  <li id="inIand" class="cur1" >内地</li>
                  <li id="hongKong"> 香港</li>
                  <li id="western">欧美</li>
                  <li id="japan">日本</li>
                  <li id="korea">韩国</li>
          </ul>
       <div class="newSongMsg">
         <div class="new0 select">
            <ul>
                   <li>
                      <div class="songMeg">
                       
                         <div class="song1">
                         <img src="source/2.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                   </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/3.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">你还在吗</span>
                         <span class="singerName">supeGril</span>
                         <i>04:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                          <div class="song1">
                         <img src="source/4.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">还会停留</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                          <div class="song1">
                         <img src="source/5.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">不知道还爱不爱</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/6.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">让我们都停下来</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/7.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">幸福是什么</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/8.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">ooo停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/9.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div> 
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/10.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间不知大盘</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
         </ul>
         </div>
         <div class="new1">
            <ul>
                   <li>
                      <div class="songMeg">
                       
                         <div class="song1">
                         <img src="source/2.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                   </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/1.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">你还在吗</span>
                         <span class="singerName">supeGril</span>
                         <i>04:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                          <div class="song1">
                         <img src="source/5.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">还会停留</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                          <div class="song1">
                         <img src="source/7.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">不知道还爱不爱</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/9.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">让我们都停下来</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/4.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">幸福是什么</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/3.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">ooo停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/8.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div> 
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/1.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间不知大盘</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
         </ul>
         </div>
         <div class="new2">
            <ul>
                   <li>
                      <div class="songMeg">
                       
                         <div class="song1">
                         <img src="source/8.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                   </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/6.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">你还在吗</span>
                         <span class="singerName">supeGril</span>
                         <i>04:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                          <div class="song1">
                         <img src="source/7.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">还会停留</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                          <div class="song1">
                         <img src="source/5.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">不知道还爱不爱</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/4.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">让我们都停下来</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/3.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">幸福是什么</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/2.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">ooo停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/1.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div> 
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/9.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间不知大盘</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
         </ul>
         </div>
         <div class="new3">
            <ul>
                   <li>
                      <div class="songMeg">
                       
                         <div class="song1">
                         <img src="source/2.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                   </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/4.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">你还在吗</span>
                         <span class="singerName">supeGril</span>
                         <i>04:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                          <div class="song1">
                         <img src="source/6.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">还会停留</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                          <div class="song1">
                         <img src="source/8.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">不知道还爱不爱</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/10.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">让我们都停下来</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/9.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">幸福是什么</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/7.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">ooo停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/5.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div> 
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/3.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间不知大盘</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
         </ul>
         </div>
         <div class="new4">
            <ul>
                   <li>
                      <div class="songMeg">
                       
                         <div class="song1">
                         <img src="source/10.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                   </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/9.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">你还在吗</span>
                         <span class="singerName">supeGril</span>
                         <i>04:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                          <div class="song1">
                         <img src="source/8.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">还会停留</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                          <div class="song1">
                         <img src="source/6.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">不知道还爱不爱</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/5.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">让我们都停下来</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                      <div class="songMeg">
                         <div class="song1">
                         <img src="source/3.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">幸福是什么</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/2.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">ooo停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/1.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间停了</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div> 
                  </li>
                  <li>
                     <div class="songMeg">
                         <div class="song1">
                         <img src="source/6.jpg"/>
                          <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span class="songName">时间不知大盘</span>
                         <span class="singerName">superGril</span>
                         <i>03:40</i>
                      </div>
                  </li>
         </ul>
         </div>
         
       </div>
  </div>
</div>
 <!--精彩推荐区-->
<div class="wonSong">
   <div class="wonSongInfo">
       <h1>精彩推荐</h1>
       <ul class="wonBox">
           <li><img src="source/11.jpg"/></li>
           <li><img src="source/12.jpg"/></li>
           <li><img src="source/13.jpg"/></li>
           <li><img src="source/14.jpg"/></li>
          
       </ul>
       <div class="bar">
           <ul>
               <li class="liset" id="d1"></li>
               <li id="d2"></li>
           </ul>
       </div>
   </div >
    <div class="listyle">
         <i class="last"></i>
         <i class="next"></i>
    </div>
</div>
 <!-- 新碟首发区--> 
<div class="newCd">
    <div class="newCdInfo">
   <h1>新碟首发</h1>
       <div class="cdBox">
           <i></i>
           <span>更多>></span>
       </div>
           <ul class="newCdBox">
                  <li id="inIand" class="cur1" >内地</li>
                  <li id="hongKong"> 香港</li>
                  <li id="western">欧美</li>
                  <li id="japan">日本</li>
                  <li id="korea">韩国</li>
          </ul>
       <div class="newCdMsg">
        <!-- <div class="new0 select">-->
            <ul>
                   <li>
                       <div class="cdMeg">
                       
                         <div class="cd1">
                             <img src="source/15.jpg"/>
                             <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span >晚睡的人</span><br />
                         <i>yoga</i>
                        </div>  
                   </li> 
                   <li>
                       <div class="cdMeg">
                       
                         <div class="cd1">
                             <img src="source/16.jpg"/>
                             <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span >晚睡的人</span><br />
                         <i>yoga</i>
                        </div> 
                    </li> 
                    <li>
                       <div class="cdMeg">
                       
                         <div class="cd1">
                             <img src="source/17.jpg"/>
                             <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span >晚睡的人</span><br />
                         <i>yoga</i>
                        </div>
                    </li> 
                    <li>
                      <div class="cdMeg">
                       
                         <div class="cd1">
                             <img src="source/18.jpg"/>
                             <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span >晚睡的人</span><br />
                         <i>yoga</i>
                        </div>
                    </li> 
                    <li>
                       <div class="cdMeg">
                       
                         <div class="cd1">
                             <img src="source/19.jpg"/>
                             <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span >晚睡的人</span><br />
                         <i>yoga</i>
                        </div>
                    </li> 
                    <li>
                       <div class="cdMeg">
                       
                         <div class="cd1">
                             <img src="source/2.jpg"/>
                             <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span >晚睡的人</span><br />
                         <i>yoga</i>
                        </div>
                     </li> 
                   <li>
                       <div class="cdMeg">
                       
                         <div class="cd1">
                             <img src="source/3.jpg"/>
                             <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span >晚睡的人</span><br />
                         <i>yoga</i>
                        </div>
                     </li> 
                   <li>
                       <div class="cdMeg">
                       
                         <div class="cd1">
                             <img src="source/6.jpg"/>
                             <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span >晚睡的人</span><br />
                         <i>yoga</i>
                        </div>
                    </li> 
                   <li>
                       <div class="cdMeg">
                       
                         <div class="cd1">
                             <img src="source/9.jpg"/>
                             <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span >晚睡的人</span><br />
                         <i>yoga</i>
                        </div>
                    </li> 
                   <li>
                      <div class="cdMeg">
                       
                         <div class="cd1">
                             <img src="source/8.jpg"/>
                             <span class="cover"><img src="source/cover_play.png"></span>
                         </div>
                         <span >晚睡的人</span><br />
                         <i>yoga</i>
                        </div>  
                    </li> 
                      
         </ul>
       <!--  </div>-->
  
       </div>
  </div>
</div>
<!--排行榜区-->
<div class="rankingList">
    <div class="rankingListInfo">
       <h1>排行榜</h1>
       <span>更多>></span>
       <ul>
          <li>
             <div class="rankBox">
                <h3>巅峰榜</h3>
                <h1>流行指数</h1>
                <span><img src="source/cover_play.png"/></span>
                <ul>
                 
                  <li><span>1</span>无药可救<br><i>张杰</i>
                  <li><span>2</span>做梦<br><i>沈梦溪</i></li>
                  <li><span>3</span>时间停了<br><i>鹿晗</i></li>
                  <li><span>4</span>slow down<br><i>雨果</i></li>
                  
                </ul>
             
             </div>
          </li>
          <li>
             <div class="rankBox">
                <h3>巅峰榜</h3>
                <h1>热歌</h1>
                <span><img src="source/cover_play.png"/></span>
                <ul>
                 
                  <li><span>1</span>无药可救<br><i>张杰</i>
                  <li><span>2</span>年少有为<br><i>李荣浩</i></li>
                  <li><span>3</span>时间停了<br><i>鹿晗</i></li>
                  <li><span>4</span>slow down<br><i>雨果</i></li>
                  
                </ul>
             
             </div>
          </li>
          <li>
             <div class="rankBox">
                <h3>巅峰榜</h3>
                <h1>新歌</h1>
                <span><img src="source/cover_play.png"/></span>
                <ul>
                 
                  <li><span>1</span>无药可救<br><i>张杰</i>
                  <li><span>2</span>做梦<br><i>沈梦溪</i></li>
                  <li><span>3</span>时间停了<br><i>鹿晗</i></li>
                  <li><span>4</span>GOOD GOOD<br><i>YUYU</i></li>
                  
                </ul>
             
             </div>
          </li>
          <li>
             <div class="rankBox">
                <h3>巅峰榜</h3>
                <h1>欧美</h1>
                <span><img src="source/cover_play.png"/></span>
                <ul>
                 
                  <li><span>1</span>无药可救<br><i>张杰</i>
                  <li><span>2</span>做梦<br><i>沈梦溪</i></li>
                  <li><span>3</span>时间停了<br><i>鹿晗</i></li>
                  <li><span>4</span>slow down<br><i>雨果</i></li>
                  
                </ul>
             
             </div>
          </li>
          <li>
             <div class="rankBox">
                <h3>巅峰榜</h3>
                <h1>韩国</h1>
                <span><img src="source/cover_play.png"/></span>
                <ul>
                 
                  <li><span>1</span>无药可救<br><i>张杰</i>
                  <li><span>2</span>做梦<br><i>沈梦溪</i></li>
                  <li><span>3</span>时间停了<br><i>鹿晗</i></li>
                  <li><span>4</span>slow down<br><i>雨果</i></li>
                  
                </ul>
             
             </div>
          </li>
       </ul>
    
    
    </div>


</div>
<!--MV-->
<div class="mv">
 <div class="mvInfo">
   <h1>MV</h1>
   <ul>
              <li class="loveSong0"><a href="#"  class="cur">精选</a></li>
              <li class="loveSong1"> <a href="#" >内地</a></li>
              <li class="loveSong2"> <a href="#" >港台</a></li>
              <li class="loveSong3"><a href="#" >欧美</a></li>
              <li class="loveSong4"><a href="#" >日本</a></li>
              <li class="loveSong5"><a href="#"  >韩国</a></li>
   </ul>
<!--   noshow为消失点-->
   <div class="mvshow chose" id="c0">
     <ul>
           <li>
               <div class="mvshow-box">
                 <div class="mvbox"><img src="source/2.jpg"/>
                 <i class="cover1"><img src="source/cover_play.png"/></i>
                 </div>
                 <span>每日新歌：仙女组局GrilCruch王炸</span>
                 <span><i></i>&nbsp;&nbsp;11万</span>
               </div>
           </li>
           <li>
               <div class="mvshow-box" >
                 <div class="mvbox"><img src="source/3.jpg"/>
                 <i class="cover1"><img src="source/cover_play.png"/></i></div>
                 <span>出逃计划  薛之谦</span>
                 <span><i></i>&nbsp;&nbsp;11万</span>
               </div>
           </li>
           <li>
                <div class="mvshow-box">
                 <div class="mvbox"><img src="source/4.jpg"/>
                 <i class="cover1"><img src="source/cover_play.png"/></i></div>
                 <span>和女友来首俏皮舞曲</span>
                 <span><i></i>&nbsp;&nbsp;11万</span>
               </div>
           </li>
           <li>
                <div class="mvshow-box">
                 <div class="mvbox"><img src="source/5.jpg"/>
                 <i class="cover1"><img src="source/cover_play.png"/></i></div>
                 <span>发现自己的美，做一个安静的小仙女</span>
                 <span><i></i>&nbsp;&nbsp;11万</span>
               </div>
           
           </li>
           <li>
                <div class="mvshow-box">
                 <div class="mvbox"><img src="source/7.jpg"/>
                 <i class="cover1"><img src="source/cover_play.png"/></i></div>
                 <span>感受中国风，中国新力量</span>
                 <span><i></i>&nbsp;&nbsp;11万</span>
               </div>
           </li>
           <li>
               <div class="mvshow-box">
                 <div class="mvbox"><img src="source/15.jpg"/>
                 <i class="cover1"><img src="source/cover_play.png"/></i></div>
                 <span>每日新歌：仙女组局GrilCruch王炸</span>
                <span><i></i>&nbsp;&nbsp;11万</span>
               </div>
           </li>
           <li>
               <div class="mvshow-box" >
                 <div class="mvbox"><img src="source/17.jpg"/>
                 <i class="cover1"><img src="source/cover_play.png"/></i></div>
                 <span>出逃计划：身体和灵魂总要有一个在路上</span>
                <span><i></i>&nbsp;&nbsp;11万</span>
               </div>
           </li>
           <li>
                <div class="mvshow-box">
                 <div class="mvbox"><img src="source/18.jpg"/>
                 <i class="cover1"><img src="source/cover_play.png"/></i></div>
                 <span>和女友来首俏皮舞曲</span>
                <span><i></i>&nbsp;&nbsp;11万</span>
               </div>
           </li>
           <li>
                <div class="mvshow-box">
                 <div class="mvbox"><img src="source/19.jpg"/>
                 <i class="cover1"><img src="source/cover_play.png"/></i></div>
                 <span>发现自己的美，做一个安静的小仙女</span>
                 <span><i></i>&nbsp;&nbsp;11万</span>
               </div>
           
           </li>
           <li>
                <div class="mvshow-box">
                 <div class="mvbox"><img src="source/16.jpg"/>
                 <i class="cover1"><img src="source/cover_play.png"/></i></div>
                 <span>感受中国风，中国新力量</span>
                <span><i></i>&nbsp;&nbsp;11万</span>
               </div>
           </li>
     </ul>
   
   </div>
<!--   <div class="show " id="c1">
     <ul>
           <li>
               <div class="show-box">
                 <div class="box"><img src="source/7.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>每日新歌：仙女组局GrilCruch王炸</span>
                 <span>播放量：11万</span>
               </div>
           </li>
           <li>
               <div class="show-box" >
                 <div class="box"><img src="source/1.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>出逃计划：身体和灵魂总要有一个在路上</span>
                 <span>播放量：31万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/9.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>和女友来首俏皮舞曲</span>
                 <span>播放量：3.1万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/3.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>发现自己的美，做一个安静的小仙女</span>
                 <span>播放量：71万</span>
               </div>
           
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/2.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>感受中国风，中国新力量</span>
                 <span>播放量：1.1万</span>
               </div>
           </li>
     
     </ul>
   </div>
   <div class="show " id="c2">
     <ul>
           <li>
               <div class="show-box">
                 <div class="box"><img src="source/6.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>每日新歌：仙女组局GrilCruch王炸</span>
                 <span>播放量：11万</span>
               </div>
           </li>
           <li>
               <div class="show-box" >
                 <div class="box"><img src="source/8.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>出逃计划：身体和灵魂总要有一个在路上</span>
                 <span>播放量：31万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/7.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>和女友来首俏皮舞曲</span>
                 <span>播放量：3.1万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/2.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>发现自己的美，做一个安静的小仙女</span>
                 <span>播放量：71万</span>
               </div>
           
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/5.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>感受中国风，中国新力量</span>
                 <span>播放量：1.1万</span>
               </div>
           </li>
     
     </ul>
   
   </div>
 <div class="show chose" id="c3">
     <ul>
           <li>
               <div class="show-box">
                 <div class="box"><img src="source/2.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>每日新歌：仙女组局GrilCruch王炸</span>
                 <span>播放量：11万</span>
               </div>
           </li>
           <li>
               <div class="show-box" >
                 <div class="box"><img src="source/1.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>出逃计划：身体和灵魂总要有一个在路上</span>
                 <span>播放量：31万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/4.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>和女友来首俏皮舞曲</span>
                 <span>播放量：3.1万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/9.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>发现自己的美，做一个安静的小仙女</span>
                 <span>播放量：71万</span>
               </div>
           
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/8.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>感受中国风，中国新力量</span>
                 <span>播放量：1.1万</span>
               </div>
           </li>
     
     </ul>
   
   </div><div class="show chose" id="c4">
     <ul>
           <li>
               <div class="show-box">
                 <div class="box"><img src="source/2.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>每日新歌：仙女组局GrilCruch王炸</span>
                 <span>播放量：11万</span>
               </div>
           </li>
           <li>
               <div class="show-box" >
                 <div class="box"><img src="source/3.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>出逃计划：身体和灵魂总要有一个在路上</span>
                 <span>播放量：31万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/1.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>和女友来ad俏皮舞曲</span>
                 <span>播放量：3.1万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/6.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>发现自己的美，做一个安静的小仙女</span>
                 <span>播放量：71万</span>
               </div>
           
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/7.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>感受中国风，中国新力量</span>
                 <span>播放量：1.1万</span>
               </div>
           </li>
     
     </ul>
   
   </div>  
   
 <div class="show chose" id="c5">
     <ul>
           <li>
               <div class="show-box">
                 <div class="box"><img src="source/5.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>每日新歌：仙女组局GrilCruch王炸</span>
                 <span>播放量：11万</span>
               </div>
           </li>
           <li>
               <div class="show-box" >
                 <div class="box"><img src="source/2.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>出逃计划：身体和灵魂总要有一个在路上</span>
                 <span>播放量：31万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/7.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>和女友来首俏皮舞曲</span>
                 <span>播放量：3.1万</span>
               </div>
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/3.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>发现自己的美，做一个安静的小仙女</span>
                 <span>播放量：71万</span>
               </div>
           
           </li>
           <li>
                <div class="show-box">
                 <div class="box"><img src="source/6.jpg"/></div>
                 <i><img src="source/cover_play.png"/></i>
                 <span>感受中国风，中国新力量</span>
                 <span>播放量：1.1万</span>
               </div>
           </li>
     
     </ul>
   
   </div>-->
 </div>
</div>
   <!--底部我暂时未完成，用图片替代-->
<div class="footer"><img src="source/0.png" /></div> 
</body>
</html>
